
function Banner(el) {
    this.el = document.querySelector(el)
    this.t = null
    this.num = 1

    this.init()

}
Banner.prototype.init = function () {
    this.titleSet()
    this.titleOver()
    this.titleOut()
}

//定时器
Banner.prototype.titleSet = function () {
    //定时器，图片切换，分页器对应相对图片
    this.t = setInterval(() => {
        this.num++
        if (this.num > 6) this.num = 1
        this.el.querySelector(' img').src = `./imgs/${this.num}.jpg`
        this.el.querySelector(' ul li.active').className = ''
        this.el.querySelector(` ul li:nth-of-type(${this.num})`).className = 'active'
    }, 800)
}

//移入效果
Banner.prototype.titleOver = function () {
    //鼠标移入显示对应图片，清除切换
    let ulLiObjs = this.el.querySelectorAll('ul li')
    ulLiObjs.forEach((item, i) => {
        item.onmouseover = () => {
            //清除定时器
            clearInterval(this.t)
            this.el.querySelector('img').src = `./imgs/${i + 1}.jpg`
            //分页器对应
            this.el.querySelector(' ul li.active').className = ''
            this.el.querySelector(` ul li:nth-of-type(${i + 1})`).className = 'active'
            // console.log('this')
            this.num = i + 1
        }
    })
}

//移出效果
Banner.prototype.titleOut = function () {
    let ulLiObjs = this.el.querySelectorAll(' ul li')
    ulLiObjs.forEach((item, i) => {
        item.onmouseout = () => {
            this.titleSet()

        }
    })
}
export default Banner




